<template>
    <div>
        <el-dialog :title="form.id ? '编辑电站' : '新增电站'" width="60%" :show-close="false"
            :visible.sync="dialogFormVisible" :close-on-click-modal="false" style="height: 100%;"
            custom-class="customclassdialog">
            <el-form :model="form" style="width: 100%;overflow-y: auto;padding-right: 10px;"
                :style="'max-height:' + windowHeight  + 'px;'">

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="电站图片:" :label-width="formLabelWidth">
                            <div class="editHeld_conter_left">
                                <el-upload class="avatar-uploader" :show-file-list="false" :headers="token"
                                :action="urlsd+'/api/admin/upload-img'" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <div v-if="form.image_all" class="avatar">
                                        <img :src="form.image_all">
                                        <div>点击更换</div>
                                    </div>
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    <div slot="tip" class="el-upload__tip">建议尺寸：800*800px</div>
                                </el-upload>
                            </div>

                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电站名称:" :label-width="formLabelWidth">
                            <screenSelect title="" type='input' v-model="form.name" :isValue='form.name'
                                placeholder="请输入" @transfer="valueHeld($event, 'name')" width='100%' position="top" :isBorder="untenFun(form.name)" />
                                <div class="unten" v-if="untenFun(form.name)">请输入电站名称</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属企业:" :label-width="formLabelWidth">
                            <screenSelect title="" type='select' v-model="form.admin_id"
                                :isValue='form.admin_id' placeholder="请选择"
                                @transfer="valueHeld($event, 'admin_id')" :options="enterpriseoptions"
                                position="top" width='100%' :isBorder="untenFun(form.admin_id)" />
                                <div class="unten" v-if="untenFun(form.admin_id)">请选择所属企业</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注:" :label-width="formLabelWidth">
                            <screenSelect title="" type='textarea' v-model="form.des" :isValue='form.des'
                                placeholder="请输入" @transfer="valueHeld($event, 'des')" width='100%' position="top" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="电站地址:" :label-width="formLabelWidth">
                            <div style="display: flex;">
                                <div v-if="surroundingPois.length == 0" style="width: 100%;">
                                    <screenSelect  title="" type='input'
                                    v-model="form.address" :isValue='form.address' placeholder="请输入"
                                    @transfer="valueHeld($event, 'address')" width='50%' position="top" :isBorder="untenFun(form.address)" />
                                    <div class="unten" v-if="untenFun(form.address)">请输入电站地址</div>
                                </div>
                                <screenSelect v-else title="" type='select' v-model="form.addressid"
                                    :isValue='form.addressid' placeholder="请选择"
                                    @transfer="valueHeld($event, 'addressid')" :options="surroundingPois" position="top"
                                    width='50%' />
                                <el-button type="primary" size="mini" round
                                    v-repeatStop="{ func: searchingHeld, delay: '2000' }">检
                                    索</el-button>
                                <el-button type="info" size="mini" round
                                    v-repeatStop="{ func: resetHeld, delay: '2000' }">重 置</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="地图:" :label-width="formLabelWidth" v-if="dialogFormVisible">
                            <div style="width: 100%;height: 300px;">
                                <baidu-map :center="{lng:form.longitude,lat:form.latitude}" :map-click="false" @click="getLocation" scroll-wheel-zoom :zoom="zoom"
                                    style="height: 100%;width: 100%;" @ready="initMap" :auto-resize="false">
                                    <bm-local-search :pageCapacity="3" :keyword="keyword" :auto-viewport="true"
                                        :panel="false" location="" :selectFirstResult="false" />
                                </baidu-map>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-repeatStop="{ func: cancel, delay: '2000' }">关 闭</el-button>
                <el-button type="primary" v-repeatStop="{ func: save, delay: '2000' }">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import screenSelect from '@/components/screenSelect/index.vue';
import { getToken } from '@/utils/auth'

export default {
    name: 'WorkspaceJsonAddcomponents',
    components: {
        screenSelect
    },
    props: {
        optionVal: {
            type: Object
        },
        dialogFormVisible: {
            type: Boolean
        },
        enterpriseoptions:{
            type:Array
        }
    },
    watch: {
        optionVal: {
            handler(ne, ol) {
                this.form = ne
                this.imageUrl = ne.image
            },
            deep: true,
            immediate: true
        },
    },
    data() {
        return {
            token: {},
            formLabelWidth: '100px',
            form: {},
            imageUrl: '',
            windowHeight: 0,
            zoom: 15,
            keyword: '',
            longitude: 0,
            latitude: 0,
            newMap: null,
            surroundingPois: [],
            isUnten: false,
            urlsd:process.env.NODE_ENV=='development'?'':process.env.VUE_APP_BASE_API
        };
    },
    mounted() {
        this.token = {
            "Authorization": getToken()
        }
        this.windowHeight = document.body.clientHeight-280;
    },
    methods: {
        untenFun(data) {
            if (this.isUnten) {
                if (data == undefined) {
                    return true
                } else {
                    if (data == '' && data != '0') {
                        return true
                    } else {
                        return false
                    }
                }
            } else {
                return false
            }

        },
        //检索
        searchingHeld() {
            let that = this
            if (that.form.address == '') {
                return that.$modal.msgWarning('地址不能为空!')
            }
            that.keyword = that.form.address
            console.log(that.form.address);
        },
        //重置检索
        resetHeld() {
            let that = this
            that.form.address = ''
            that.keyword = ''
            that.surroundingPois = []
            that.form.longitude = ''
            that.form.latitude = ''
        },
        getLocation(e) {
            let that = this
            let map = that.newMap
            map.clearOverlays() //清除地图上所有覆盖物
            console.log(e);
            that.form.longitude = e.point.lng
            that.form.latitude = e.point.lat
            let mk = new BMap.Marker(e.point)
            map.addOverlay(mk)
            const geocoder = new BMap.Geocoder();
            geocoder.getLocation(e.point, (res) => {
                if (res) {
                    if (res.surroundingPois.length > 0) {
                        res.surroundingPois.map(item => {
                            item.label = item.address
                            item.value = item.uid
                        })
                        that.form.addressid = res.surroundingPois[0].uid
                    } else {
                        that.form.addressid = ''
                    }
                    that.surroundingPois = res.surroundingPois

                    const address = res.address; // 获取地址信息
                    that.form.address = address
                    // that.valueHeld(address,'address')
                    // console.log(that.form);
                }
            });
        },
        initMap({ BMap, map }) {
            const that = this
            console.log('编辑', that.form);
            that.newMap = map
            map.clearOverlays() //清除地图上所有覆盖物
            if (!that.form.id) {
                let geolocation = new BMap.Geolocation()
                geolocation.getCurrentPosition(
                    function (r) {
                        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                            let mk = new BMap.Marker(r.point)
                            map.addOverlay(mk)
                            // 移动地图中心点
                            map.panTo(r.point)
                            that.zoom = 15
                            that.center = r.point
                            that.$modal.msgSuccess('自动定位成功')
                        }
                    },
                    { enableHighAccuracy: true }
                )
            }else{
                let point = {
                    lng:that.form.longitude,
                    lat:that.form.latitude
                }
                let mk = new BMap.Marker(point)
                map.addOverlay(mk)
                map.panTo(point)
            }
        },
        valueHeld(childParam, fatherparam) {
            this.isUnten = false
            this.form[fatherparam] = childParam
        },
        cancel() {
            let e = {}
            e.dialogFormVisible = false
            e.form = this.form
            this.$emit('updata', e);
        },
        save() {
            this.isUnten = true
            let e = {}
            let that = this
            e.dialogFormVisible = false
            e.form = that.form
            console.log(e.form);
            
            for (let key in e.form) {
                console.log(key);
                if(key!='des'){
                    if (e.form[key] === '' || e.form[key] === undefined) {
                    return false
                }
                }
                
            }
            if (that.surroundingPois.length > 0) {
                that.surroundingPois.map(item => {
                    if (that.form.addressid == item.uid) {
                        that.form.address = item.address
                        that.form.longitude = item.point.lng
                        that.form.latitude = item.point.lat
                    }
                })
            }
            this.$emit('addupdata', e);
        },
        handleAvatarSuccess(res, file) {
            let that = this
            let form = JSON.parse(JSON.stringify(that.form))
            // this.imageUrl = URL.createObjectURL(file.raw);
            if (res.code == 200) {
                form.image_all = res.data.img_path_all
                form.image = res.data.img_path
                that.form = form
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$modal.msgError('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M) {
                this.$modal.msgError('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M;
        }
    },
};
</script>

<style lang="scss" scoped>
// @keyframes fadeIn {
//     from { 
//         opacity: 0;
//         transform: translateY(-100%);
//     }
//     to { 
//         opacity: 1;
//         transform: translateY(0px);
//     }
// }
// ::v-deep .customclassdialog {
//     border-radius: 10px !important;
//     animation: fadeIn 1s ease-in-out forwards;
// }

::v-deep .editHeld_conter_left .avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.editHeld_conter_left .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 180px;
    height: 180px;
    line-height: 180px;
    text-align: center;
}

.editHeld_conter_left .avatar {
    width: 180px;
    height: 180px;
    display: block;
    position: relative;

    img {
        width: 100%;
        height: 100%;
    }

    div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #00000066;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFF;
    }
}

::v-deep .BMap_cpyCtrl.BMap_noprint.anchorBL {
    display: none !important;
}

::v-deep .anchorBL {
    display: none !important;
}

</style>